<template>
  <div>
    <van-nav-bar fixed :title="title" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top">
      <paper-list
        v-if="Status === '1'"
        :list="list"
        :btn-text="btnText"
        @clickLeft="deletePaper"
        @clickCenter="edit"
        @clickRight="submit"
      />
      <!-- drafts list -->

      <paper-list v-if="Status === '2'" :list="list" :btn-text="btnText" @clickRight="edit" />
      <!-- review list -->

      <paper-list
        v-if="Status === '3'"
        :list="list"
        :btn-text="btnText"
        @clickLeft="showReson"
        @clickCenter="edit"
        @clickRight="submit"
      />
      <!-- refuse list -->

      <paper-list v-if="Status === '5'" :list="list" :btn-text="btnText" @clickRight="signPage" />
      <!-- sign list -->

      <paper-list
        v-if="Status === '7'"
        :list="list"
        :btn-text="btnText"
        @clickCenter="checkAccount"
        @clickRight="edit"
      />
      <!-- done list -->

      <no-data v-if="list.length === 0" />
      <p v-if="end === true && list.length !== 0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
    </div>
    <van-dialog v-model="show" :show-confirm-button="false" class="dialog-box" close-on-click-overlay>
      <img :src="require('@/assets/images/refuseBg.png')" alt>
      <div class="flex-s-c flex-d-c">
        <h1 class="fs-32 fw-600 mt-30 mb-10">您的进件信息审核未通过</h1>
        <p class="fs-24 plr-80 pb-80">{{ failReason }}</p>
        <button class="color-white plr-60 mb-80" @click="edit(AccountNo)">重新编辑进件资料</button>
      </div>
      <van-icon class="dialog-close" name="cross" @click="show=false" />
    </van-dialog>
    <!-- 失败原因弹窗 -->

    <van-popup v-model="signCodeShow" position="right" class="fullScreen bg-gray">
      <sign-code :img-url="signUrl" @close="signCodeShow = false" />
    </van-popup>
    <!-- 签约弹出层 -->

    <van-popup v-model="infoShow" position="right" class="fullScreen bg-gray">
      <info :info="info" @close="infoShow = false" />
    </van-popup>
    <!-- 信息弹出层 -->
  </div>
</template>

<script>
import paperList from 'components/paperList'
import noData from 'components/noData'
import signCode from 'views/paperManage/signCode'
import info from 'views/paperManage/info'
import { GetCashQrCodeUrl } from 'api/store'
import { GetMerchantApplyList, SubmitMerchantApply, DeleteMerchantApply } from 'api/merchantPaper'
import utils from 'utils/utils'
export default {
  components: { paperList, noData, signCode, info },
  data() {
    return {
      list: [],
      AccountNo: '', // 进件id
      btnText: {}, // 按钮名称
      title: '', // 标题
      Status: 0, // 进件状态
      failReason: '', // 拒绝理由
      show: false, // 弹窗状态

      // 签约二维码
      signUrl: '',
      signCodeShow: false,

      // 信息
      info: {},
      infoShow: false,

      request: {
        // 请求参数
        PageIndex: 1,
        PageSize: 10
      },

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  created() {
    this.Status = this.$route.params.Status
    console.log(this.Status)
    this.request.Status = this.$route.params.Status
    this.initDate(this.Status)
    this.GetMerchantApplyList()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    initDate(Status) {
      console.log(1223)
      switch (Status) {
        case '1':
          this.title = '待进件草稿箱'
          this.btnText.leftText = '删除'
          this.btnText.centerText = '编辑'
          this.btnText.rightText = '提交审核'
          break
        case '2':
          this.title = '正在审核中'
          this.btnText.rightText = '查看进件'
          break
        case '3':
          this.title = '审核未通过'
          this.btnText.leftText = '查看原因'
          this.btnText.centerText = '重新编辑'
          this.btnText.rightText = '提交审核'
          break
        case '5':
          this.title = '待签约'
          this.btnText.rightText = '签约二维码'
          break
        case '7':
          this.title = '已完成'
          this.btnText.centerText = '查看账号'
          this.btnText.rightText = '查看进件'
          break
        default:
          break
      }
    },
    deletePaper(val) {
      console.log(val)
      var _this = this
      _this.request.AccountNo = val
      DeleteMerchantApply(_this.request).then(res => {
        if (res) {
          _this.$toast({
            type: 'success',
            message: '已删除成功'
          })
          window.location.reload()
        }
      })
    },
    edit(val) {
      console.log(val)
      this.show = false
      this.$router.push({
        path: '/merchantPaper/',
        query: { accountNo: val }
      })
    },
    submit(val) {
      console.log(val)
      var _this = this
      _this.request.AccountNo = val
      SubmitMerchantApply(_this.request).then(res => {
        if (res.State) {
          if (res) {
            _this.$toast({
              type: 'success',
              message: '已提交申请,等待审核'
            })
            window.location.reload()
          }
        }
      })
    },
    showReson(val) {
      this.AccountNo = val
      this.list.forEach(tem => {
        if (tem.AccountNo === val) {
          this.failReason = tem.FailReason
        }
      })
      this.show = true
    },
    signPage(val) {
      this.AccountNo = val
      this.list.forEach(tem => {
        if (tem.AccountNo === val) {
          this.signUrl = tem.SignUrl
        }
      })
      this.signCodeShow = true
    },
    checkAccount(val) {
      // 查看账号信息
      const that = this
      let info = {}
      that.AccountNo = val
      console.log(val)
      console.log(that.list)
      that.list.forEach(tem => {
        if (tem.AccountNo === val) {
          info = tem
        }
      })
      if (info.OwnerId) {
        GetCashQrCodeUrl({ StoreId: info.OwnerId }).then(res => {
          if (res) {
            info.CashQrCodeUrl = res.Data
            that.info = info
            that.infoShow = true
          }
        })
      }
    },
    GetMerchantApplyList() {
      GetMerchantApplyList(this.request).then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              var Obj = {}
              Obj.RealName = tem.MerchantName
              Obj.TelNumber = tem.ContactTel
              Obj.AccountNo = tem.PayAccountNo
              Obj.HeadPortrait = tem.Logo
              Obj.FailReason = tem.FailReason
              Obj.SignUrl = tem.SignUrl
              Obj.OwnerId = tem.OwnerId
              Obj.ServiceRate = tem.ServiceRate
              this.list.push(Obj)
            })
          }
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
        }
      })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (utils.getScrollHeight() - utils.getClientHeight() - utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          if (_this.request.PageIndex < _this.totalAmout) {
            _this.request.PageIndex++
            _this.GetMerchantApplyList()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-box {
  p {
    width: 100%;
  }
  button {
    height: 88px;
    border-radius: 44px;
    border: none;
    background: #ff4e43;
  }
}
.fullScreen {
  width: 100vw;
  height: 100vh;
}
.dialog-close {
  position: absolute;
  top: 15px;
  right: 15px;
}
</style>
